<template>
  <div class="container">
    <!-- 1 -->
    <div>
      <div>
        <img src="../assets/loveflower.png" alt="爱情鲜花">
      </div>
      <div class="model">
        <div class="left">
          <a href="#">
            <img src="../assets/m_l.jpeg" alt="">
          </a>
        </div>
        <div class="right">
          <a v-for="item in data1" :key="item.did">
            <div @click="todetail(item.did,'data1')">
              <img :src="item.dimg" alt="">
            </div>
            <p>{{item.dtitle}}</p>
            <div>
              <p>￥{{item.dprice}}</p>
              <span>销量{{item.dcount}}笔</span>
            </div>
          </a>
          <!-- <a href="#">
            <div>
              <img src="../assets/r_b1.jpeg" alt="">
            </div>
            <p>浪漫满屋</p>
            <div>
              <p>￥275</p>
              <span>销量17229笔</span>
            </div>
          </a>
          <a href="#">
            <div>
              <img src="../assets/r_b1.jpeg" alt="">
            </div>
            <p>浪漫满屋</p>
            <div>
              <p>￥275</p>
              <span>销量17229笔</span>
            </div>
          </a>
          <a href="#">
            <div>
              <img src="../assets/r_b1.jpeg" alt="">
            </div>
            <p>浪漫满屋</p>
            <div>
              <p>￥275</p>
              <span>销量17229笔</span>
            </div>
          </a>
          <a href="#">
            <div>
              <img src="../assets/r_b1.jpeg" alt="">
            </div>
            <p>浪漫满屋</p>
            <div>
              <p>￥275</p>
              <span>销量17229笔</span>
            </div>
          </a>
          <a href="#">
            <div>
              <img src="../assets/r_b1.jpeg" alt="">
            </div>
            <p>浪漫满屋</p>
            <div>
              <p>￥275</p>
              <span>销量17229笔</span>
            </div>
          </a> -->
        </div>
      </div>
    </div>
    <!-- 2 -->
    <div>
      <div>
        <img src="../assets/freflower.png" alt="爱情鲜花">
      </div>
      <div class="model">
        <div class="left">
          <a href="#">
            <img src="../assets/fre_m_l.jpeg" alt="">
          </a>
        </div>
        <div class="right">
          <a v-for="item in data2" :key="item.did">
            <div @click="todetail(item.did,'data2')">
              <img :src="item.dimg" alt="">
            </div>
            <p>{{item.dtitle}}</p>
            <div>
              <p>￥{{item.dprice}}</p>
              <span>销量{{item.dcount}}笔</span>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 3 -->
    <div>
      <div>
        <img src="../assets/flowerbox.png" alt="爱情鲜花">
      </div>
      <div class="model">
        <div class="left">
          <a href="#">
            <img src="../assets/flow_box_ml.jpeg" alt="">
          </a>
        </div>
        <div class="right">
          <a v-for="item in data3" :key="item.did">
            <div @click="todetail(item.did,'data3')">
              <img :src="item.dimg" alt="">
            </div>
            <p>{{item.dtitle}}</p>
            <div>
              <p>￥{{item.dprice}}</p>
              <span>销量{{item.dcount}}笔</span>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 4 -->
    <div>
      <div>
        <img src="../assets/cake.png" alt="爱情鲜花">
      </div>
      <div class="model">
        <div class="left">
          <a href="#">
            <img src="../assets/cake_ml.jpeg" alt="">
          </a>
        </div>
        <div class="right">
          <a v-for="item in data4" :key="item.did">
            <div @click="todetail(item.did,'data4')">
              <img :src="item.dimg" alt="">
            </div>
            <p>{{item.dtitle}}</p>
            <div>
              <p>￥{{item.dprice}}</p>
              <span>销量{{item.dcount}}笔</span>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 5 -->
    <div>
      <div>
        <img src="../assets/openflower.png" alt="爱情鲜花">
      </div>
      <div class="model">
        <div class="left">
          <a href="#">
            <img src="../assets/open_ml.jpeg" alt="">
          </a>
        </div>
        <div class="right">
          <a v-for="item in data5" :key="item.did">
            <div @click="todetail(item.did,'data5')">
              <img :src="item.dimg" alt="">
            </div>
            <p>{{item.dtitle}}</p>
            <div>
              <p>￥{{item.dprice}}</p>
              <span>销量{{item.dcount}}笔</span>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 6 -->
    <div>
      <div>
        <img src="../assets/plant.png" alt="爱情鲜花">
      </div>
      <div class="model">
        <div class="left">
          <a href="#">
            <img src="../assets/plant_ml.jpeg" alt="">
          </a>
        </div>
        <div class="right">
          <a v-for="item in data6" :key="item.did">
            <div @click="todetail(item.did,'data6')">
              <img :src="item.dimg" alt="">
            </div>
            <p>{{item.dtitle}}</p>
            <div>
              <p>￥{{item.dprice}}</p>
              <span>销量{{item.dcount}}笔</span>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 友情链接 -->
    <div class="lj">
      <ul>
        <li><a href="">友情链接</a></li>
        <li><a href="">中国政府网</a></li>
        <li><a href="">人民网</a></li>
        <li><a href="">中国商标网</a></li>
        <li><a href="">新华网</a></li>
        <li><a href="">北京大学</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data_tl: '',
        data1:'',
        data2:'',
        data3:'',
        data4:'',
        data5:'',
        data6:'',
      }
    },
    mounted () {
      this.axios.get('/index1').then(res=>{
        console.log(res);
        this.data1=res.data.results
      })
      this.axios.get('/index2').then(res=>{
        console.log(res);
        this.data2=res.data.results
      })
      this.axios.get('/index3').then(res=>{
        console.log(res);
        this.data3=res.data.results
      })
      this.axios.get('/index4').then(res=>{
        console.log(res);
        this.data4=res.data.results
      })
      this.axios.get('/index5').then(res=>{
        console.log(res);
        this.data5=res.data.results
      })
      this.axios.get('/index6').then(res=>{
        console.log(res);
        this.data6=res.data.results
      })
    },
    methods: {
      todetail(a,data) {
        console.log(a);
        // let b=a.split('.com')
        // console.log(b);
        this.$router.push(`/details/?did=${a}&data=${data}`)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 1000px;
    // height: 500px;
    background-color: #f2f2f2;
    >div>div>img{
      width: 120px;
      margin-top: 30px;
    }
    .model{
      width: 1200px;
      display: flex;
      justify-content:space-between;
      align-items: center;
      padding-left: 10px;
      >div.left{
        width: 232px;
        height: 628px;
        overflow: hidden;
        box-sizing: border-box;
        img:hover{
          transition: all .3s ease-in;
          transform: scale(1.05);
        }
      }
      >div.right{
        width: 968px;
        height: 638px;
        margin-left: 20px;
        overflow: hidden;
        a{
          width: 232px;
          height: 309px;
          display: inline-block;
          box-sizing: border-box;
          text-decoration: none;
          background-color: #fff;
          margin:0px 20px 15px 0px;
          padding:10px;
          >p{
            font-size: 15px;
            color: #666;
          }
          div{
            width: 220px;
            height: 220px;
            p{
              margin:0px;
              display: inline-block;
              font-size: 18px;
              color: #f43;
            }
            span{
              margin-left: 90px;
              font-size: 12px;
              color: #999;
            }
            img{
              width: 210px;
            }
          }
        }
        a:hover{
          transition: all .3s ease-out;
          transform: scale(1.05);
        }
      }
    }
    .lj{
      height: 81px;
      line-height: 81px;
      ul{
        margin:0;
        padding: 5px;
        list-style: none;
        display: flex;
        justify-content: left;
        li{
          margin-right: 20px;
          a{
            text-decoration: none;
            font-size: 14px;
            color: #666;
          }
          a:hover{
            color: #8e4422;
          }
        }
        li:first-child a{
          font-size: 15px;
          color: #333;
        }
      }
    }
  }
</style>